<template>
  <div>
    <div class="navi">
      <Navi
        @openRegister="openRegister"
        @openLogin="openLogin"
        @openPerson="openPerson"
      ></Navi>
    </div>

    <div class="mainbg">
      <div class="main">
        <router-view></router-view>
      </div>
    </div>

    <div>
      <transition name="fadeLogin">
        <div v-if="showPopup">
          <div v-if="showPopup" class="backdrop"></div>
          <Login
            @changeIsShow="isShow"
            @backLogin="openLogin"
            @toRegister="openRegister"
            :isLogin="isLogin"
            :isResign="isResign"
          ></Login>
        </div>
      </transition>
    </div>

    <div class="login">
      <transition name="fadeLogin">
        <div v-if="showPerson">
          <div v-if="showPerson" class="backdrop"></div>
          <PersonaData
            @backPerson="openPerson"
            @changeIsShow="isPersonShow"
          ></PersonaData>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import Navi from "./components/Navi.vue";
import Login from "./components/Login.vue";
import MainFace from "./components/MainFace.vue";
import ThemeList from "./components/ThemeList.vue";
import PersonaData from "./components/PersonaData.vue";
export default {
  data() {
    return {
      isLogin: true,
      isResign: false,
      showPerson: false,
    };
  },
  components: {
    Navi,
    Login,
    MainFace,
    ThemeList,
    PersonaData,
  },
  methods: {
    isPersonShow(val) {
      this.showPerson = val;
    },
    isShow(val) {
      this.showPopup = val;
    },
    openLogin() {
      this.isLogin = true;
      this.isResign = false;
    },
    openRegister() {
      this.isLogin = false;
      this.isResign = true;
    },
    openPerson() {
      this.showPerson = true;
    },
  },
  computed: {
    ifNotLogin() {
      return this.$store.getters.getNotLogin;
    },
    showPopup(){
      if(this.ifNotLogin){
        return true
      }else{
        return false
      }
    }
  },
};
</script>

<style>
body {
  margin: 0;
  padding: 0;
}
.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
  z-index: 10; /* 确保覆盖其他内容 */
}
.navi {
  width: 100%;
  height: 60px;
}
.mainbg {
  height: auto;
  width: 100%;
  min-height: 100vh;
  background: #d3e9e7;
  margin-top: 9px;
  overflow: hidden;
}
.main {
  width: 60vw;
  height: auto;
  min-height: 91vh;
  margin: 0 auto;
}
.fadeLogin-enter-active {
  animation: fadeIn 0.3s;
}
.fadeLogin-leave-active {
  animation: fadeOut 0.3s;
}
.fadeLogin-leave,
.fadeLogin-enter-to {
  opacity: 1;
}
.fadeLogin-leave-to,
.fadeLogin-enter {
  opacity: 0;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
</style>